<template>
<div id="company-introduce">
    <div class="banner">
        <video loop muted autoplay src="/index/video.mp4"></video>
        <div class="mask">
            <div class="banner-discribe">
                <div>傅利叶智能</div>
                <div>
                    通过智能技术让人人享有美好生活EMPOWERING YOU
                </div>
            </div>
        </div>
    </div>

    <div class="introduce">
        <div class="content">
            <div class="title">
                <div>企业介绍</div>
                <div>INTRODUCTION</div>
            </div>
            <div class="text">
                <div>
                    傅利叶智能成立于2015年，深耕智能机器人技术领域，致力于通过智能技术为人类带来美好的生活。集团总部位于上海张江，同时在新加坡设立区域总部，在北京、上海、广州、墨尔本、苏黎世、芝加哥等地进行研发及生产布局，已建立全球化的研发、生产和服务网络。傅利叶智能持续多年进行高强度的累计超过5亿元的研发投入，搭建为社会、行业增效赋能的智能机器人技术平台，垂直应用于健康、教育等多个生态场景，服务全球用户。2021年，公司入选国家“专精特新”小巨人企业，并已牵头承担近20项国家及省级科研项目。
                </div>
                <div>
                    集团旗下康复版块现已进入规模化应用，为全球超过40个国家和地区的2000多家客户提供以康复机器人为核心的一体化、信息化、标准化的智能康复综合性解决方案，推动康复医疗服务转型升级。
                </div>
                <div>
                    愿景：通过智能技术让人人享有美好生活
                </div>
                <div>
                    使命：成为全球一流科技企业
                </div>
                <div>
                    价值观：开放创新，积极进取，专业担当，卓越合作
                </div>
            </div>
        </div>
        <div class="asset">
            <!-- <img src="/" alt=""> -->
            ....
        </div>
    </div>
</div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

onMounted(() => {

})
</script>

<style lang="less" scoped>
#company-introduce{
    width: 100%;
    .banner{
        width: 100%;
        height:100vh;
        // background-color: rgb(144, 121, 91);
        position: relative;

        video{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .mask{
            background-color: rgba(54, 110, 145, 0.47);          
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            .banner-discribe{
                padding-bottom: 10rem;
                :nth-child(1){
                    font-size: 7rem;
                    text-align: center;
                    color: white;
                    font-weight: 600;
                }
                :nth-child(2){
                    margin-top: 4rem;
                    text-align: center;
                    width: 80rem;
                    font-size: 5rem;
                    color: white;
                }
            }
        }
    }
    .introduce{
        width: 100%;
        background-color: #182950;
        .content{
            display: flex;
            
            .title{
                flex: 1;
                text-align: center;
                margin-top: 6rem;
                color: white;
                :nth-child(1){
                    font-size: 5rem;
                    font-weight: 600;
                }
                :nth-child(2){
                    margin-top: 2rem;
                    font-size: 3rem;
                    font-weight: 500;
                }
            }

            .text{
                width: 100rem;
                padding: 6rem;
                text-align: left;
                font-size: 1.8rem;
                line-height: 4rem;
                color: white;

                div{
                    margin-bottom: 3rem;
                }

            }
        }

        .asset{
            width: 100%;
            height: 0;
            padding-bottom: 20%;
            font-size: 5rem;
            text-align: center;
            color: white;
            letter-spacing: 3rem;
            // background-color: antiquewhite;
        }
    }
}
</style>
